<template>
  <div class="log-drawer-title flex justify-between items-center">
    <span class="log-drawer-title-name">
      <slot>{{name}}</slot>
    </span>
    <div class="log-toolbox flex">
      <el-tooltip content="Register">
        <i class="cuifont icon_globe cursor-pointer"
           v-loading="syncLoading"
           element-loading-spinner="el-icon-loading"
           @click="syncData"></i>
      </el-tooltip>

      <el-tooltip :content="$t('custom.close')">
        <i class="cuifont  icon_dismiss cursor-pointer"
           @click="handleClose"></i>
      </el-tooltip>
    </div>
  </div>
</template>

<script>

export default {
  name: 'WebhookDrawerTitle',
  props: {
    name: {
      type: String
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      syncLoading: false
    }
  },
  components: {

  },
  methods: {
    handleClose () {
      this.$emit('closeWebHookVisible')
    },
    syncData () {
      this.syncLoading = true
      this.$interface.taskManager.postStartAllWebhookSync().then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.syncLoading = false
      }).finally(() => {
        this.syncLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.log-drawer-title {
  &-name {
    color: #404040;
  }
}
.log-toolbox {
  .ellipsis-vessel {
    margin-left: 7px;
  }
  .cuifont {
    font-size: 14px;
    color: #404040;
    font-weight: 400;
    height: 28px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      color: #138dc7;
      background-color: #e6f7ff;
      border-radius: 4px;
    }
  }
}
</style>
